import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Header from "../../components/Header/Header"
import { reqregister } from '../../http/api'

export default class Register extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: ""
      }
    }
  }
  changeUser(v, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: v
      }
    })
  }
  async register() {
    let res = await reqregister(this.state.user);
    if(res.data.code ===200){
      Toast.show({
        content:res.data.msg
      })
      this.props.history.push("/login")
    }
  }
  render() {
    return (
      <div>
        <Header title="注册"></Header>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='userphone'>
            <Input placeholder='请输入手机号' clearable onChange={(v) => this.changeUser(v, 'phone')} />
          </Form.Item>
          <Form.Item label='用户名' name='nickname'>
            <Input placeholder='请输入用户名' clearable onChange={(v) => this.changeUser(v, 'nickname')} />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(v) => this.changeUser(v, 'password')} />
          </Form.Item>
        </Form>
        <p style={{textAlign:'center'}}>
          <Button color='warning' size='middle' onClick={() => this.register()}>注册</Button>
        </p>
      </div>
    )
  }
}